<template>
  <el-drawer v-model="drawerVisible" :direction="direction" :close-on-click-modal="false" :title="drawerTitle" size="550px" :before-close="handleClose">
    <template #default>
      <el-form ref="formRef" :model="dataForm" :rules="formRules" label-width="auto" style="max-width: 500px">
        <el-form-item label="账户名" prop="name">
          <el-input v-model="dataForm.name" :disabled="disabled" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="券商ID" prop="account_id">
          <el-input v-model="dataForm.account_id" :disabled="disabled" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="券商名称" prop="securities_name">
          <el-input v-model="dataForm.securities_name" :disabled="disabled" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="可交易板块" prop="tradable_sectors">
          <el-checkbox-group v-model="dataForm.tradable_sectors">
            <el-checkbox-button v-for="city in cities" :key="city" :value="city">
              {{ city }}
            </el-checkbox-button>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="本期购买比例" prop="buy_ratio">
          <el-input v-model="dataForm.buy_ratio" type="number" @input="handleInput3" @mousewheel.native.prevent :disabled="disabled">
            <template #suffix> % </template>
          </el-input>
        </el-form-item>
        <el-form-item label="账户状态" prop="status">
          <el-radio-group v-model="dataForm.status">
            <el-radio-button label="启用" value=1 />
            <el-radio-button label="禁用" value=0 />
          </el-radio-group>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="cancelClick">取消</el-button>
        <el-button v-if="!disabled" type="primary" @click="confirmClick(formRef)">确定</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
// import { businessOcrApi, transportOcrApi } from "@/api/modules/bas/ocr";
// import { getDictList } from "@/api/modules/bas/dict";
import type { DrawerProps } from 'element-plus'
import { useI18n } from "vue-i18n";

const i18n = useI18n()
const props = defineProps({
});
const cities = ['主板', '创业板', '科创板', '北交所', 'ST股']
// 是否打开
const drawerVisible = ref(false)
// 标题
let drawerTitle = ref('')
// 表单
let dataForm = reactive({
  name: null,
  account_id: null,
  securities_name: null,
  tradable_sectors: [],
  buy_ratio: null,
  status: '1'
})
const formRules = reactive({
  name: [{ required: true, message: '必填', trigger: "blur" }],
  account_id: [{ required: true, message: '必填', trigger: "blur" }],
  securities_name: [{ required: true, message: '必填', trigger: "blur" }],
  total_assets: [{ required: true, message: '必填', trigger: "blur" }],
  available_funds: [{ required: true, message: '必填', trigger: "blur" }],
  buy_ratio: [{ required: true, message: '必填', trigger: "blur" }]
});
const handleInput3 = (value) => {
  dataForm.buy_ratio = value
  .replace(/[^\d.]/g, '')        // 移除所有非数字和非小数点的字符
  .replace(/^\./, '0.')          // 处理以小数点开头的情况（如 `.5` → `0.5`）
  .replace(/(\d+\.\d*)\./g, '$1'); // 确保只保留第一个小数点
}
// 打开方向
const direction = ref<DrawerProps['direction']>('rtl')
const disabled = ref(false)
const open = (data) => {
  drawerVisible.value = true
  resetForm()
  drawerTitle.value = data.title
  disabled.value = data.disabled
}
const edit = (data) => {
  drawerVisible.value = true
  resetForm()
  drawerTitle.value = data.title
  dataForm = reactive({...data.form})
  disabled.value = data.disabled
}
const close = () => {
  formRef.value.resetFields()
  drawerVisible.value = false
}
const emit = defineEmits();
// 关闭前操作
const handleClose = (done: () => void) => {
  formRef.value.resetFields()
  done()
}
const formRef = ref()
const cancelClick = () => {
  formRef.value.resetFields()
  drawerVisible.value = false
}
const confirmClick = (formEl) => {
  if (!formEl) return;
  formEl.validate(valid => {
    if (!valid) return;
      const form = JSON.parse(JSON.stringify(dataForm));
      emit('addSave', form)
  });
}
onMounted(() => {
});
const resetForm = () => {
  dataForm = reactive({
    name: null,
    account_id: null,
    securities_name: null,
    tradable_sectors: [],
    buy_ratio: null,
    status: '1'
  })
}
// 暴露给父组件方法
defineExpose({
  open,
  edit,
  close
});
</script>
